<template>
  <a-modal
    v-model:visible="visible"
    title="文档筛选"
    style="top: 128px;right:calc( -50vw + 290px)"
    @cancel="onClose"
    @ok="submit"
  >

    <a-form layout="vertical">
      <a-form-item label="时间">
        <a-space direction="vertical">
          <a-range-picker v-model:value="param.time" value-format="YYYY" picker="year" @change="handleChangeDate"/>
          <a-space>
            <a-button @click="lateYear(10)">近10年</a-button>
            <a-button @click="lateYear(5)">近5年</a-button>
            <a-button @click="lateYear(3)">近3年</a-button>
          </a-space>
        </a-space>
      </a-form-item>
      <a-form-item label="类型">
        <a-space direction="vertical">
          <a-space>
            <a-button :class="{active: param.documentType === '0'}" @click="selectType('0')">全部</a-button>
            <a-button :class="{active: param.documentType === '2'}" @click="selectType('2')">专利</a-button>
            <a-button :class="{active: param.documentType === '1'}" @click="selectType('1')">论文</a-button>
          </a-space>
        </a-space>
      </a-form-item>
      <a-form-item v-show="conditiaonData?.materialNameChList?.length" label="材料名称">
        <a-checkbox-group
          v-model:value="param.materialNameCh"
          :options="conditiaonData?.materialNameChList?.map(mapperOption)"
        />
      </a-form-item>

      <a-form-item v-show="conditiaonData?.disciplineList?.length" label="学科领域">
        <a-checkbox-group
          v-model:value="param.discipline"
          :options="conditiaonData?.disciplineList?.map(mapperOption)"
        />
      </a-form-item>
      <a-form-item v-show="conditiaonData?.materialTypeList?.length" label="材料类型">
        <a-checkbox-group
          v-model:value="param.materialType"
          :options="conditiaonData?.materialTypeList?.map(mapperOption)"
        />
      </a-form-item>
      <a-form-item v-show="conditiaonData?.performanceTypeList?.length" label="性能类型">
        <a-checkbox-group
          v-model:value="param.performanceType"
          :options="conditiaonData?.performanceTypeList?.map(mapperOption)"
        />
      </a-form-item>
      <a-form-item v-show="conditiaonData?.modificationNameList?.length" label="改性方法">
        <a-checkbox-group
          v-model:value="param.modificationName"
          :options="conditiaonData?.modificationNameList?.map(mapperOption)"
        />
      </a-form-item>
      <a-form-item v-show="conditiaonData?.experimentMethodList?.length" label="实验方法">
        <a-checkbox-group
          v-model:value="param.experimentMethod"
          :options="conditiaonData?.experimentMethodList?.map(mapperOption)"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { getConditionData, type IConditionData } from '@/api/dialog'
import { computed, ref, watch } from 'vue'
interface Props {
  ids: string
  visible: boolean
  placement?: string
  initParam: any
}

const props = withDefaults(defineProps<Props>(), {
  placement: 'right',
  visible: false
})

watch(() => props.visible, () => {
  if(props.initParam) {
    param.value = {...props.initParam}
  } else {
    param.value = {
      time: [],
      discipline: [],
      experimentMethod: [],
      materialNameCh: [],
      modificationName: [],
      performanceType: [],
      documentType:''
    }
  }
})

const emit = defineEmits(['update:visible', 'filter','setInitParam'])
const visible = computed(() => props.visible)
const onClose = () => {
  emit('update:visible', false)
  reset()
}

function submit() {
  console.log(queryData.value)
  emit('filter', queryData.value)
  emit('setInitParam', param.value)
}
interface Param {
  time: string[]

  discipline?: string[]
  //实验方法 使用方法同ids
  experimentMethod?: string[]
  // 材料名称
  materialNameCh?: string[]
  // 实验方法
  materialType?: string[]
  // 实验方法
  modificationName?: string[]
  //实验方法
  performanceType?: string[]
  documentType?: string
}
function lateYear(year: number) {
  const now = new Date()
  now.setMonth(11)
  const last = new Date()
  last.setFullYear(last.getFullYear() - year)
  // @todo 近几年时间调整， linux差了8个小时
  param.value.time = [last.toISOString(), now.toISOString()]
}
const handleChangeDate = (date: string[]) => {
  if(date.length > 1) {
    param.value.time = date.map((c,i) => {
      if(c.length > 4) return c
      if(i === 0) return new Date(c).toISOString()
      const nextYear = new Date(c).getFullYear() + 1
      return new Date(nextYear, 0, 0).toISOString()
    })
  }
}
const param = ref<Param>({
  time: [],
  discipline: [],
  experimentMethod: [],
  materialNameCh: [],
  modificationName: [],
  performanceType: [],
  documentType:''
})

function reset() {
  param.value = {
    time: [],
    discipline: [],
    experimentMethod: [],
    materialNameCh: [],
    modificationName: [],
    performanceType: []
  }
}
const selectType =(value:string)=>{
  param.value.documentType = value
}

function handleUpdate(v: boolean) {
  emit('update:visible', v)
  if (!v) {
    submit()
    // reset()
  }
  //
}

const conditiaonData = ref<IConditionData>()

const queryData = computed(() => {
  const NormalFilter = {
    discipline: param.value.discipline?.join(','),
    experimentMethod: param.value.experimentMethod?.join(','),
    materialNameCh: param.value.materialNameCh?.join(','),
    materialType: param.value.materialType?.join(','),
    modificationName: param.value.modificationName?.join(','),
    performanceType: param.value.performanceType?.join(','),
    documentType: param.value.documentType
  }

  if (!param.value.time) return NormalFilter
  const [startTime, endTime] = param.value.time

  return {
    startTime,
    endTime,
    ...NormalFilter
  }
})

watch(
  () => props.ids,
  () => {
    if (!props.ids) return
    getConditionData(props.ids).then((res) => {
      if (!res.data.ok) return
      param.value = {
        time: [],
        discipline: [],
        experimentMethod: [],
        materialNameCh: [],
        modificationName: [],
        performanceType: [],
        documentType:''
      }
      conditiaonData.value = res.data.entity
    })
  },
  {
    immediate: true
  }
)

function mapperOption(o: string) {
  return { label: o, value: o }
}
</script>
<style lang="scss" scoped>
.active {
  border-color: #3875F6;
}
</style>